import React,{Component} from "react";
import {Link, withRouter} from "react-router-dom";
import { Steps, Button } from "antd";
import moment from "moment";
import  Footer from "../component/footer.js";

class BookFourth extends Component{
    constructor(props){
        super(props);
        this.state={
            ...this.props.location.values?(()=>{
                localStorage.setItem("valuesS", JSON.stringify(this.props.location.values));
                return this.props.location.values;
            })(): JSON.parse(localStorage.getItem("valuesS")),
        }
    }
    componentDidMount(){
        scrollTo(0,0);
    }
    render(){
        const initalValues = this.state.initalValues;
        const values = this.state.values;
        let typeobj = {},
            toTypeobj ={},
            sumPay = 0,
            sumConstruction = 0,
            sumFule = 0,
            sumGoTrip = 0,//去程总的钱
            sumToTrip = 0,//返程总的钱
            type="",
            toType="",
            typeValue = "",
            toTypeValue = "",
            ssumPay = 0;
        switch(initalValues.goType){
            case "0":{
                typeValue="经济舱";
                type = "economyClass";
            };break;
            case "1":{
                typeValue="商务舱";
                type = "businessClass";
            };break;
            case "2":{
                typeValue="头等舱";
                type = "firstClass";
            };break;
            default:
        }
        typeobj =  initalValues.goTrip[type];
        for(let i = 0; i <  values.passenger.length; i++){
            sumPay += values.passenger[i].pay;
            sumConstruction += values.passenger[i].construction;
            sumFule += values.passenger[i].fuel;
        }
        sumGoTrip = sumPay * typeobj.afterPrice + sumConstruction * typeobj.construction + sumFule * typeobj.fuel;

        if(Object.keys(initalValues.toTrip).length){
            switch(initalValues.toType){
                case "0":{
                    toTypeValue="经济舱";
                    toType = "economyClass";
                };break;
                case "1":{
                    toTypeValue="商务舱";
                    toType = "businessClass";
                };break;
                case "2":{
                    toTypeValue="头等舱";
                    toType = "firstClass";
                };break;
                default:
            }
            toTypeobj =  initalValues.toTrip[toType];
            sumToTrip = sumPay * toTypeobj.afterPrice + sumConstruction * toTypeobj.construction + sumFule * toTypeobj.fuel;
        }
        let orderNumber = Date.now() + "11";
        console.log("boox-fourth-this.state", this.state);
        return (
        <div id="book">
            <div className="top">
                <div>
                    <div><Link to="/"><i className="logo"></i></Link></div>
                    <div className="step">
                        <Steps current={3} size="small">
                            <Steps.Step title="乘机信息" description="" />
                            <Steps.Step title="确认信息" description="" />
                            <Steps.Step title="支付" description="" />
                            <Steps.Step title="完成" description="" />
                        </Steps>
                    </div>
                </div>
            </div>
            <div className="content">
                <div className="end">
                    <div className="complete">
                        <p className="book-state"><span>已出票</span></p>
                        {this.state.data.toID?
                            <p className="order-number">
                                订单号：<i>去</i><span>{this.state.data.goData.orderNumber}</span><span className="space">|</span><i>返</i><span>{this.state.data.toData.orderNumber}</span>
                            </p>:
                            <p className="order-number">订单号：<span>{this.state.data.goData.orderNumber}</span></p>
                        }
                        <p className="hook"><img src={require("../assets/images/icon_ok.png")}></img></p>
                        <p className="pay-state"><span>恭喜您已完成支付</span></p>
                        <p className="pay"><span>总金额<span><i>￥</i>{Object.keys(initalValues.toTrip).length?(sumGoTrip + sumToTrip).toFixed(2):(sumGoTrip).toFixed(2)}</span></span></p>
                        <p className="buttons">
                            <Link to="/"><Button className="accomplish">完成</Button></Link>
                            <Link to="/"><Button>继续预定</Button></Link>
                            <Link to={{
                                pathname:"/unsubscribe",
                                values: this.state
                            }} replace><Button>我要退票</Button></Link>
                        </p>
                    </div>
                    <div className="order-inf">
                        <h2>订单行程</h2>
                        <div>
                            <div className="go-trip all-trip">
                                <div className="plain">
                                    <span className="trip">去</span>
                                    <span>{initalValues.goTrip.flight.company}</span>
                                    <span>
                                        {(()=>{
                                            let type = "小型";
                                            switch(initalValues.goTrip.flight.type){
                                                case 1:type = "中型";break;
                                                case 2:type = "大型";break;
                                                case 3:type = "巨型";break;
                                            }
                                            return initalValues.goTrip.flight.plane + "(" + type + "机)";
                                        })()}
                                    </span>
                                    <span>{typeValue}</span>
                                </div>
                                <div className="where">
                                    <div className="start">
                                        <span>出发</span>
                                        <span>{moment(initalValues.goTrip.start.time).format("MM月DD日")}</span>
                                        <span>{moment(new Date(initalValues.goTrip.start.time)).format("HH:mm")}</span>
                                        <span>周{(()=>{
                                            let week = "一";
                                            switch(moment(initalValues.goTrip.start.time).format("E")){
                                                case "2":week = "二"; break;
                                                case "3":week = "三"; break;
                                                case "4":week = "四"; break;
                                                case "5":week = "五"; break;
                                                case "6":week = "六"; break;
                                                case "7":week = "日"; break;
                                                default: ;
                                            }
                                            return week;
                                        })()}</span>
                                        <span>{initalValues.goTrip.start.city}</span>
                                        <span className="airport">{initalValues.goTrip.start.airport}</span>
                                    </div>
                                    {
                                        (()=>{
                                            let time = (moment(initalValues.goTrip.end.time).valueOf() - moment(initalValues.goTrip.start.time).valueOf())/1000;//秒
                                            return <div className="over-time"><span>{Math.floor(time / 3600)}小时{parseInt(time % 3600 / 60)}分钟</span></div>
                                        })()
                                    }
                                    <div className="end">
                                        <span>到达</span>
                                        <span>{moment(initalValues.goTrip.end.time).format("MM月DD日")}</span>
                                        <span>{moment(new Date(initalValues.goTrip.end.time)).format("HH:mm")}</span>
                                        <span>周{(()=>{
                                            let week = "一";
                                            switch(moment(initalValues.goTrip.end.time).format("E")){
                                                case "2":week = "二"; break;
                                                case "3":week = "三"; break;
                                                case "4":week = "四"; break;
                                                case "5":week = "五"; break;
                                                case "6":week = "六"; break;
                                                case "7":week = "日"; break;
                                                default: ;
                                            }
                                            return week;
                                        })()}</span>
                                        <span>{initalValues.goTrip.end.city}</span>
                                        <span className="airport">{initalValues.goTrip.end.airport}</span>
                                    </div>
                                </div>
                            </div>
                            {
                                (()=>{
                                    // 返回的路程
                                    if(Object.keys(initalValues.toTrip).length){
                                        return <div div className="to-trip all-trip">
                                            <div className="plain">
                                                <span className="trip">返</span>
                                                <span>{initalValues.toTrip.flight.company}</span>
                                                <span>
                                                    {(()=>{
                                                        let type = "小型";
                                                        switch(initalValues.toTrip.flight.type){
                                                            case 1:type = "中型";break;
                                                            case 2:type = "大型";break;
                                                            case 3:type = "巨型";break;
                                                        }
                                                        return initalValues.toTrip.flight.plane + "(" + type + "机)";
                                                    })()}
                                                </span>
                                                <span>{toTypeValue}</span>
                                            </div>
                                            <div className="where">
                                                <div className="start">
                                                    <span>出发</span>
                                                    <span>{moment(initalValues.toTrip.start.time).format("MM月DD日")}</span>
                                                    <span>{moment(new Date(initalValues.toTrip.start.time)).format("HH:mm")}</span>
                                                    <span>周{(()=>{
                                                        let week = "一";
                                                        switch(moment(initalValues.toTrip.start.time).format("E")){
                                                            case "2":week = "二"; break;
                                                            case "3":week = "三"; break;
                                                            case "4":week = "四"; break;
                                                            case "5":week = "五"; break;
                                                            case "6":week = "六"; break;
                                                            case "7":week = "日"; break;
                                                            default: ;
                                                        }
                                                        return week;
                                                    })()}</span>
                                                    <span>{initalValues.toTrip.start.city}</span>
                                                    <span className="airport">{initalValues.toTrip.start.airport}</span>
                                                </div>
                                                {
                                                    (()=>{
                                                        let time = (moment(initalValues.toTrip.end.time).valueOf() - moment(initalValues.toTrip.start.time).valueOf())/1000;//秒
                                                        return <div className="over-time"><span>{Math.floor(time / 3600)}小时{parseInt(time % 3600 / 60)}分钟</span></div>
                                                    })()
                                                }
                                                <div className="end">
                                                    <span>到达</span>
                                                    <span>{moment(initalValues.toTrip.end.time).format("MM月DD日")}</span>
                                                    <span>{moment(new Date(initalValues.toTrip.end.time)).format("HH:mm")}</span>
                                                    <span>周{(()=>{
                                                        let week = "一";
                                                        switch(moment(initalValues.toTrip.end.time).format("E")){
                                                            case "2":week = "二"; break;
                                                            case "3":week = "三"; break;
                                                            case "4":week = "四"; break;
                                                            case "5":week = "五"; break;
                                                            case "6":week = "六"; break;
                                                            case "7":week = "日"; break;
                                                            default: ;
                                                        }
                                                        return week;
                                                    })()}</span>
                                                    <span>{initalValues.toTrip.end.city}</span>
                                                    <span className="airport">{initalValues.toTrip.end.airport}</span>
                                                </div>
                                            </div>
                                        </div>
                                    }
                                })()
                            }
                        </div>
                    </div>
                    <div className="passenger-inf">
                        <h2>出行人信息</h2>
                        {
                            values.passenger.map((item, i, arr)=>{
                                return <div className="passenger-n">
                                    <i>{i+1}</i>
                                    <span className="span">{item.type === "0"?"成人":item.type === "1"?"儿童":"婴儿"}</span>
                                    <span className="span">{item.name}</span>
                                    <span className="id">证件信息:<span>{item.IDnumber}</span></span>
                                    {/* <span>票号:<span>{"123456789"}</span></span> */}
                                </div>
                            })
                        }
                    </div>
                    <div className="contact">
                        <h2>联系信息</h2>
                        <div>
                            <p>手机号:<span>{values.contact.phone}</span></p>
                            {values.contact.email?<p>邮箱号<span>{values.contact.email}</span></p>:[]}
                        </div>
                    </div>
                </div>
            </div>
            <Footer></Footer>
        </div>
        );
    }
  
}
export default withRouter(BookFourth);